import { computed, defineComponent, ref } from 'vue';
import ArrayAsModel from './ArrayAsModel.vue';
import Coloring from './Coloring.vue';
import CustomModel from './CustomModel.vue';
import Dense from './Dense.vue';
import Disable from './Disable.vue';
import InaList from './InaList.vue';
import IndeterminateState from './IndeterminateState.vue';
import Label from './Label.vue';
import NativeForm from './NativeForm.vue';
import OnDarkBackground from './OnDarkBackground.vue';
import OptionGroup from './OptionGroup.vue';
import Standard from './Standard.vue';
import StandardSizes from './StandardSizes.vue';
import ToggleOrder from './ToggleOrder.vue';
import WithIcons from './WithIcons.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>ArrayAsModel</h5>
            <ArrayAsModel />
          </div>
          <div class='block-'>
            <h5 class='title'>Coloring</h5>
            <Coloring />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomModel</h5>
            <CustomModel />
          </div>
          <div class='block-'>
            <h5 class='title'>Dense</h5>
            <Dense />
          </div>
          <div class='block-'>
            <h5 class='title'>Disable</h5>
            <Disable />
          </div>
          <div class='block-'>
            <h5 class='title'>InaList</h5>
            <InaList />
          </div>
          <div class='block-'>
            <h5 class='title'>IndeterminateState</h5>
            <IndeterminateState />
          </div>
          <div class='block-'>
            <h5 class='title'>Label</h5>
            <Label />
          </div>
          <div class='block-'>
            <h5 class='title'>NativeForm</h5>
            <NativeForm />
          </div>
          <div class='block-'>
            <h5 class='title'>OnDarkBackground</h5>
            <OnDarkBackground />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionGroup</h5>
            <OptionGroup />
          </div>
          <div class='block-'>
            <h5 class='title'>Standard</h5>
            <Standard />
          </div>
          <div class='block-'>
            <h5 class='title'>StandardSizes</h5>
            <StandardSizes />
          </div>
          <div class='block-'>
            <h5 class='title'>ToggleOrder</h5>
            <ToggleOrder />
          </div>
          <div class='block-'>
            <h5 class='title'>WithIcons</h5>
            <WithIcons />
          </div>
        </div>
      );
    };
  },
});
